几个实用的 JS 方法

MuYan2021-04-06JSJS

移动端开发,指定浏览器判定

// 指定浏览器列表
const browserList = [
  "micromessenger", // 微信
  "alipayclient", // 支付宝
  "dingtalk", // 钉钉
];

// 指定浏览器类型判定
const browserType = () => {
  let ua = window.navigator.userAgent.toLowerCase();
  // 非指定浏览器
  let type = browserList.length;
  for (let i in browserList) {
    if (ua.indexOf(browserList[i]) > 0) {
      type = i;
    }
  }
  return type;
};

// 普通浏览器:false , 指定浏览器:true
const generalBrowser = () => {
  return browserType() < browserList.length;
};

获取浏览器 url 内的指定参数信息

// 获取浏览器 url 指定参数
const getQueryString = (name) => {
  return (
    decodeURIComponent(
      (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
        location.href
      ) || [, ""])[1].replace(/\+/g, "%20")
    ) || null
  );
};
// 获取浏览器 url 内的 id 参数
getQueryString("id");

资源 404 的解决办法

// 资源404 全局解决方法
const defautImg = "默认图片";
document.addEventListener(
  "error",
  function(e) {
    let elem = e.target;
    // 404 图片资源替换(其他资源,如视频、音频等同理)
    if (elem.tagName.toLowerCase() == "img") {
      elem.src = defautImg;
      Object.assign(elem.style, {
        objectFit: "contain",
      });
    }
  },
  true
);

深拷贝,过滤,赋值

const deepClone = (obj, filter = false, val = "") => {
  /// obj 拷贝对象,filter 是否开启过滤,val 开启过滤后的赋值
  // 判断拷贝的要进行深拷贝的是数组还是对象,是数组的话进行数组拷贝,对象的话进行对象拷贝
  let objClone = Array.isArray(obj) ? [] : {};
  if (obj && typeof obj === "object") {
    // 进行深拷贝的不能为空,并且是对象或者是数组
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        if (obj[key] && typeof obj[key] === "object") {
          //判断ojb子元素是否为对象,如果是,递归复制
          objClone[key] = filter
            ? filterMethods(deepClone(obj[key], filter, val), val)
            : deepClone(obj[key], filter, val);
        } else {
          //如果不是,简单复制
          objClone[key] = filter ? filterMethods(obj[key], val) : obj[key];
        }
      }
    }
  }
  return objClone;
};

// 过滤 null undefined
const filterMethods = (text, val) => {
  if ((text !== 0 && !text) || text === "null" || text === "") {
    text = val;
  }
  return text;
};

文件下载,如 xlsx

const download = (data, fileName = "表格", type = "xlsx") => {
  // data 为 blob 的二进制对象
  return new Promise((resolve, reject) => {
    try {
      let blob = new Blob([data], { type: "application/vnd.ms-excel" });
      if (type !== "xlsx") blob = new Blob([data]);
      const objectURL = window.URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.style.display = "none";
      link.href = objectURL;
      link.setAttribute("download", `${fileName}.${type}`);
      document.body.appendChild(link);
      link.click();
      resolve();
    } catch (err) {
      reject(err);
    }
  });
};

过滤 formData

const filter = (obj, excepts = []) => {
  for (let k in obj) {
    if (
      [undefined, "", null].filter((e) => !excepts.includes(e)).includes(obj[k])
    )
      delete obj[k];
  }
  return obj;
};

过滤除中英文外的字符

const str = (str) => {
  str = str.replace(/[^\u4E00-\u9FA5A-Za-z\s]/g, "");
  return str;
};

富文本标签过滤

const screeningText = (html) => {
  let res = new RegExp("<.+?>", "g");
  let msg = html.replace(res, "");
  return msg;
};

...不定时更新

上次更新 2026/6/23 11:49:15
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.15.8